<template>
  <!-- 商品详情 -->
  <view :class="[
    'goods-item-box',
    shop ? 'goods-item-box-shop' : 'goods-item-box-pay'
  ]">
    <uni-swipe-action>
      <uni-swipe-action-item :key="item.goods_id" :right-options="options2" class="goods-item-box_action"
        v-for="(item, index) in goodsOrder" @click.stop="onClick($event, item.goods_id)">
        <view class="goods_box">
          <view class="goods_item">
            <radio v-if="!shop" color="#dd444c" style="transform: scale(0.8)" :checked="item.select"
              @click.stop="goodsStateChange(index)"></radio>
            <view class="img_box" @click.stop="onClickGoods(item.goods_id)">
              <image class="img" mode="aspectFill" :src="`${baseUrl}/images/audi/library/${item.images_kv}`"></image>
            </view>
            <view class="content_box">
              <view>
                <view class="title">{{ item.shop_title }}</view>
                <view class="server_box">
                  <view class="service">{{
                    item.service == 4 ? '礼包卡劵' : '实体商品'
                  }}</view>
                  <view class="service">{{ item.type_name1 }}</view>
                  <view class="service" v-if="item.service == 1">{{ postState }}</view>
                  <view class="service" v-if="item.buyers_num_max">团购</view>
                </view>
              </view>
              <view class="price_box">
                <view class="prepaid_rice" v-if="item.prepaid_rice && item.prepaid_rice > 0">(订金)</view>
                <view class="present">￥<text class="price">{{
                  item.price | moneyShow
                }}</text></view>
                <u-number-box integer bgColor="#fff" :key="item.id" buttonSize="20" :value="item.num"
                  @overlimit="overlimit($event, item.limit_num_max)" v-if="index === itemIndex"
                  @change="valChange($event, index)" :max="item.limit_num_max ? item.limit_num_max : 999"></u-number-box>
                <view v-else @click.stop="clickNum(index)" class="num">x{{ item.num }}</view>
              </view>
            </view>
          </view>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>
  </view>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'CartGoodsDetail',
  props: {
    shop: Boolean,
    itemIndex: {
      type: Number,
      default: -1
    },
    isPost: {
      type: Boolean,
      default: true
    },
    hasPaidByShipper: {
      type: Boolean,
      default: false
    },
    // itemMargin: {
    // type: String,
    // default: function() {
    //   return {}
    // }
    // }
    // itemMargin: {
    //   type: Object,
    //   default: function() {
    //     return {}
    //   }
    // }
  },
  data() {
    return {
      baseUrl: this.$baseUrl,
      options2: [
        {
          text: '取消',
          style: {
            backgroundColor: '#aeadb3'
          }
        },
        {
          text: '删除',
          style: {
            backgroundColor: '#de4141'
          }
        }
      ]
    }
  },
  computed: {
    ...mapState(['goodsOrder', 'loginInfo', 'address']),
    postState() {
      if (this.hasPaidByShipper) {
        if (this.isPost) {
          return '包邮,只限该产品'
        } else {
          return '包邮,改到店领取'
        }
      } else {
        return '包邮'
      }
    }
  },
  methods: {
    ...mapMutations([
      'updateAddress',
      'changeGoodsNub', //更改购物车商品数量
      'updateGoodsState',
      'updateGoodsOrderPay',
      'saveCarModelDataList',
    ]),
    // 到商品详情页
    onClickGoods(id) {
      uni.navigateTo({
        url: `/Shop/GoodsDetail?id=${id}`
      })
    },
    goodsStateChange(index) {
      let { goods_id, select } = this.goodsOrder[index]
      this.updateGoodsState({ select, goods_id })
    },
    clickNum(i) {
      this.$emit('clickNum', i)
      // this.itemIndex = i
    },
    overlimit(e, v) {
      if (e === 'plus') {
        uni.$showMsg(`该商品最多只能购买${v}个`)
      }
    },
    onClick(e, id) {
      if (e.content.text == '删除') {
        this.changeGoodsNub({ goods_id: id, num: 0 })
      }
    },
    valChange(e, index) {
      let { goods_id } = this.goodsOrder[index]
      this.changeGoodsNub({ goods_id, num: e.value })
    }
  },
  watch: {},
  // 组件周期函数--监听组件挂载完毕
  mounted() { },
  // onPageScroll() {
  //   console.log(8888)
  //   this.itemIndex = -1
  // }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixins.scss';

.goods-item-box-shop {
  padding: 0rpx 16rpx;

  .goods-item-box_action {
    margin-bottom: 10rpx;

    .goods_item {
      .content_box {
        height: 140rpx;

        .title {
          @include goods_title(28);
        }
      }

      .img_box {
        width: 130rpx;
        height: 130rpx;
      }
    }
  }
}

.goods-item-box-pay {
  margin: 0 30rpx 30rpx;
  padding: 36rpx 16rpx;

  .goods-item-box_action {
    margin-bottom: 30rpx;

    .goods_item {
      .content_box {
        height: 150rpx;

        .title {
          @include goods_title();
        }
      }

      .img_box {
        width: 150rpx;
        height: 150rpx;
      }
    }
  }
}

.goods-item-box {
  background: #fff;
  box-shadow: $theme-shadow2;

  .goods-item-box_action {
    display: block;

    &:nth-last-child(1) {
      margin: 0;
    }

    .goods_box {
      background: #fff;
      border-radius: 10rpx;

      .goods_item {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        .img_box {
          border: 2rpx solid #f1f1f1;
          border-radius: 15rpx;
          overflow: hidden;
          flex-shrink: 0;

          .img {
            width: 100%;
            height: 100%;
          }
        }

        .content_box {
          margin-left: 20rpx;
          min-width: 0;
          display: flex;
          flex: 1;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-around;

          .title {
            margin-bottom: 4rpx;
            @include text-ellipsis();
          }

          .server_box {
            display: flex;
            flex-wrap: wrap;

            .service {
              text-align: center;
              font-size: 22rpx;
              padding: 2rpx 8rpx;
              border-radius: 6rpx;
              color: #999;
              background-color: #f1f1f1;
              margin-right: 10rpx;
              margin-top: 8rpx;
            }

            // .coupon {
            // color: $theme-color;
            // @include text-tag-light();
            // font-size: 22rpx;
            // @include text-tag()
            // }
            // .service-post {
            // @include text-tag()
            // @include text-tag-light();
            // margin-right: 10rpx;
            // }
            // .service-type {
            // @include text-tag()
            // @include text-tag-light()
            // }
          }

          .price_box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .prepaid_rice {
              margin-right: 5rpx;
              color: $theme-color;
              font-size: 24rpx;
            }

            .present {
              margin-right: auto;


              .price {
                font-weight: bold;
                font-size: 30rpx;
              }
            }

            .num {
              margin-right: 8rpx;
              font-size: 26rpx;
              letter-spacing: 4rpx;
            }
          }
        }
      }
    }
  }
}
</style>
